<template>
  <el-dialog
    :title="addCataInfodata.id ? '修改目录' : '添加目录'"
    :visible.sync="showCataDialog"
    @close="clearContent"
  >
    <!-- 表单 -->
    <el-form
      v-if="showCataDialog"
      ref="addCataInfo"
      label-width="100px"
      :model="addCataInfodata"
      :rules="rules"
    >
      <!-- <hr style="color:#f8f8f8"> -->
      <el-row type="flex">
        <el-form-item prop="subject_id" label="归属学科">
          <el-select
            v-model="addCataInfodata.subject_id"
            placeholder="归属学科"
          >
            <el-option
              v-for="item in addSubjectName"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directory_name">
          <el-input
            v-model="addCataInfodata.directory_name"
            placeholder="请选择目录名称"
          />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="排序">
          <el-input-number
            v-model="addCataInfodata.sort"
            label="排序"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-switch
            v-model="addCataInfodata.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="目录图标">
          <!-- 图片上传 -->
          <el-upload
            action="http://122.51.249.55:7005/admin/index/upload?mode=single&type=image"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :headers="myToken"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            <!-- <img width="100%" :src="addCataInfodata.directory_icon" alt="">
            <img width="100%" src="http://122.51.249.55:7005/upload/image/2021/11/1635738718736.jpg" alt=""> -->
          </el-dialog>
          <span>建议尺寸:120*120</span>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button size="middle" @click="btnCancel">取消</el-button>
          <el-button
            type="primary"
            size="middle"
            @click="btnOk(data)"
          >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addCataInfo, getSingleCata, editSingleCata } from '@/api/cataInfo'
import { mapGetters } from 'vuex'
const defaultData = {
  subject_id: '',
  creator_id: '',
  directory_name: '',
  is_show: '',
  sort: 10,
  directory_icon: '',
  id: ''
}
export default {
  name: 'AddCataInfo',
  props: {
    addSubjectName: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      myToken: { Authorization: null },
      showCataDialog: false,
      dialogImageUrl: '',
      dialogVisible: false,
      addCataInfodata: {
        ...defaultData
      },
      // url: '',
      // deLfiles: '',
      // 上传的图片
      fileList: [{ name: 'previewImg', url: '' }],
      // 验证规则
      rules: {
        subject_name: [
          { required: true, message: '请选择学科分类', trigger: 'blur' }
        ],
        directory_name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    // console.log($store.getters.token)
    this.myToken.Authorization = this.token
  },

  mounted() {},

  methods: {
    handleChange(value) {
      console.log(value)
    },
    // 移除图片
    handleRemove(file, deLfiles) {
      this.fileList = []
    },
    // 图片预览
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleAvatarSuccess(response, file, fileList) {
      this.$message.success('图片上传成功')
      this.addCataInfodata.directory_icon = response.data.url
      // console.log(response.data.url)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    btnCancel() {
      this.$refs.addCataInfo.resetFields() // 重置校验结果
      // 关闭弹层
      this.showCataDialog = false
    },
    async btnOk() {
      // 验证表单
      // console.log('确定按钮')
      await this.$refs.addCataInfo.validate()
      if (this.addCataInfodata.id) {
        // 有id修改
        await editSingleCata(this.addCataInfodata)
        this.$message.success('修改成功')
        this.addCataInfodata = {}
        // this.fileList = []
      } else {
        // 无id添加
        await addCataInfo(this.addCataInfodata)
        this.$message.success('创建成功')
      }
      this.$emit('updateCata')
      // alert('123')
      // this.addCataInfodata = {}
      this.addCataInfodata = {
        ...defaultData
      }
      this.$refs.addCataInfo.resetFields() // 重置校验结果
      this.showCataDialog = false
    },
    // 父组件点击编辑按钮，显示单个目录数据
    async getSingleCata(id) {
      const { data } = await getSingleCata(id)
      this.addCataInfodata = data
      // 回显数据
      this.fileList[0].url = `http://122.51.249.55:7005/${data.directory_icon}`
    },
    // 点击关闭弹出框,清空内容
    clearContent() {
      this.addCataInfodata = {
        ...defaultData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #66b1ff;
  padding: 20px 20px 10px;
}

.el-upload-list__item {
  transition: none !important;
}
</style>
